<template >
	<div class="contain-box">
		<div class="box-header">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>数据中心</el-breadcrumb-item>
				<el-breadcrumb-item>销售业绩排名</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="box-set">
			<el-date-picker
					size="small"
					type="daterange"
					style="margin-right: 10px"
					range-separator="至"
					start-placeholder="订单日期"
					end-placeholder="订单日期">
			</el-date-picker>
			<el-button type="primary" style="background-color: #1abc9c" size="mini">查 询</el-button>
			<el-button  size="mini">重 置</el-button>
		</div>
		<div class="box-title">
			<p>销售笔数合计 : <span style="color: #1abc9c">3000</span></p>
			<p>销售金额合计 : <span style="color: #1abc9c">4500000.00</span> 元</p>
			<p>销售笔数合计 : <span style="color: #1abc9c">100</span> 元</p>
			<p>销售金额合计 : <span style="color: #1abc9c">2500000.00</span> 元</p>
		</div>
		<div class="box-form">
			<div class="form-table">
				<el-table
						:data="tableData"
						border
						style="width: 100%">
					<el-table-column
							type="index"
							label="销售排名"
							align="center"
							width="100px"
					>
					</el-table-column>
					<el-table-column
							prop="code"
							label="销售姓名"
							align="center"
					>
					</el-table-column>
					<el-table-column
							prop="code"
							label="销售笔数"
							align="center"
					>
					</el-table-column>
					
					<el-table-column
							prop="code"
							label="销售金额(元)"
							align="center"
					>
					</el-table-column>
					<el-table-column
							prop="code"
							label="退款笔数"
							align="center"
					>
					</el-table-column>
					<el-table-column
							prop="code"
							label="退款金额(元)"
							align="center"
					>
					</el-table-column>
				
				</el-table>
			</div>
			<div class="form-page">
				<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="10"
						:page-sizes="[5, 10,]"
						:page-size="100"
						layout="prev, pager, next,sizes, jumper"
						:total="400">
				</el-pagination>
			</div>
		</div>
	
	</div>
</template >

<script >
    export default {
        data(){
            return{
                status:[
                    {
                        id:1,
                        name:'全部'
                    },
                    {
                        id:2,
                        name:'待入库'
                    },
                    {
                        id:3,
                        name:'已入库'
                    },
                ],
                tableData: [
                    {
                        date:'2022-05-06',
                        code:'AT1234565245',
                        name:'上海XXX建筑公司',
                        money:'60000',
                        out:'仓库A',
                        status:1
                    },
                    {
                        date:'2022-05-06',
                        code:'AT1234565245',
                        name:'上海XXX建筑公司',
                        money:'60000',
                        out:'仓库A',
                        status:2
                    },
                    {
                        date:'2022-05-06',
                        code:'AT1234565245',
                        name:'上海XXX建筑公司',
                        money:'60000',
                        out:'仓库A',
                        status:3
                    }
                ],
            }
        },
        methods:{

        }
    }
</script >

<style scoped lang="less">
	.contain-box{
		width: 100%;
		height: 100%;
		.box-header{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			margin-bottom: 10px;
		}
		.box-set{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
		.box-title{
			width: 100%;
			margin: 20px 0;
			padding: 10px 20px;
			border-radius: 5px;
			box-sizing: border-box;
			display: flex;
			p{
				margin-right: 20px;
			}
			background-color: rgba(26, 188, 156,0.2);
			color: #666;
			font-size: 14px;
		}
		.box-form{
			width: 100%;
			height: calc(100% - 150px);
			.form-header{
				width: 100%;
			}
			.form-table{
				margin-top: 20px;
				width: 100%;
			}
			.form-page{
				margin-top: 50px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				/deep/.el-pager .active{
					background-color: #1abc9c;
				}
			}
		}
	}
</style >
